<template>
	<div id="app" class="container">
		<div class="card mb-3">
			<div class="card-header text-white bg-dark">
				录入成绩
			</div>
			<div class="card-body">
				<form>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">姓名：</label>
						<div class="col-sm-10">
							<input type="text" v-model.trim="form.name" class="form-control" placeholder="请输入学生姓名">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">班级：</label>
						<div class="col-sm-10">
							<select class="form-select" v-model.trim="form.class">
								<option value="三年级1班">三年级1班</option>
								<option value="三年级2班">三年级2班</option>
								<option value="三年级3班">三年级3班</option>
							</select>
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">数学：</label>
						<div class="col-sm-10">
							<input type="number" v-model.number="form.Math" class="form-control" placeholder="请输入数学成绩">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">语文：</label>
						<div class="col-sm-10">
							<input type="number" v-model.number="form.Chinese" class="form-control"
								placeholder="请输入语文成绩">
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-2 col-form-label">英语：</label>
						<div class="col-sm-10">
							<input type="number" v-model.number="form.English" class="form-control"
								placeholder="请输入英语成绩">
						</div>
					</div>
					<div class="mb-3">
						<button @click='handleAdd' type="button" class="btn btn-secondary">录入</button>
					</div>
				</form>
			</div>
		</div>
		<div class="card mb-3">
			<div class="card-header text-white bg-dark">
				筛选搜索
			</div>
			<div class="card-body">
				<form>
					<div class="mb-3 row">
						<label class="col-sm-1 col-form-label">搜索</label>
						<div class="col-sm-5">
							<select v-model.trim="searchs" class="form-select">
								<option disabled value="">请选择班级</option>
								<option value="三年级1班">三年级1班</option>
								<option value="三年级2班">三年级2班</option>
								<option value="三年级3班">三年级3班</option>
							</select>
						</div>
						<div class="col-sm-6">
							<div class="input-group">
								<input v-model.trim="search" type="text" class="form-control" placeholder="请输入学生姓名">
								<button @click='handleSearch' class="btn btn-secondary" type="button">
									搜索
								</button>
							</div>
						</div>
					</div>
					<div class="mb-3 row">
						<label class="col-sm-1 col-form-label">筛选</label>
						<div class="col-sm-2">
							<select v-model.trim="course" class="form-select">
								<option value="Math">数学</option>
								<option value="Chinese">语文</option>
								<option value="English">英语</option>
							</select>
						</div>
						<div class="col-sm-4">
							<input v-model.trim="small" type="text" class="form-control" placeholder="分数最小值">
						</div>
						<div class="col-sm-1 text-center">——</div>
						<div class="col-sm-4">
							<div class="input-group">
								<input v-model.trim="big" type="text" class="form-control" placeholder="分数最大值">
								<button @click='handleFilter' class="btn btn-secondary" type="button">筛选</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<table class="table table-bordered">
			<thead class="table-dark">
				<tr>
					<th>#</th>
					<th>班级</th>
					<th>姓名</th>
					<th @click='handleRank("Math")'>数学</th>
					<th @click='handleRank("Chinese")'>语文</th>
					<th @click='handleRank("English")'>英语</th>
					<th>总分</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item , index) in message" :class="{actives:item.selected}">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.class}}</td>
					<td>{{item.Math}}</td>
					<td>{{item.Chinese}}</td>
					<td>{{item.English}}</td>
					<td>{{item.Math+item.Chinese+item.English}}</td>
				</tr>

			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					class: '',
					Math: '',
					Chinese: '',
					English: '',
				},
				message: [{
						name: 'Bob',
						class: '三年级2班',
						Math: 97,
						Chinese: 89,
						English: 67,
						selected: false,

					},
					{
						name: 'Tom',
						class: '三年级1班',
						Math: 67,
						Chinese: 52,
						English: 98,
						selected: false,

					},
					{
						name: 'Jerry',
						class: '三年级2班',
						Math: 72,
						Chinese: 87,
						English: 89,
						selected: false,

					},
					{
						name: 'Ben',
						class: '三年级1班',
						Math: 92,
						Chinese: 87,
						English: 59,
						selected: false,

					},
					{
						name: 'Chan',
						class: '三年级3班',
						Math: 47,
						Chinese: 85,
						English: 92,
						selected: false,

					},
				],
				search: '',
				searchs: '',
				small: '',
				big: '',
				course: '',
				MathOrder: 1,
				ChineseOrder: 1,
				EnglishOrder: 1,
			}
		},
		methods: {
			handleAdd: function() {
				var add = JSON.parse(JSON.stringify(this.form));
				this.message.push(add);
			},
			handleRank: function(key) {
				this[key + 'Order'] = -this[key + 'Order'];
				var self = this;
				this.message.sort(function(itemA, itemB) {
					return (itemA[key] - itemB[key]) * self[key + 'Order'];

				});
			},
			handleSearch: function() {
				var self = this;
				this.message.forEach(function(item, index) {

					if (self.search) {
						content = item.name.search(self.search) > -1
					}
					if (self.searchs) {
						test = item.class.search(self.searchs) > -1
					}
					if (content & test) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})
			},
			handleFilter: function() {
				let course = this.course;
				let small = this.small;
				let big = this.big;
				this.message.forEach(function(item, index) {
					if (item[course] > small & item[course] < big) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})
			}
		},

	}
</script>

<style>
	.actives {
		background-color: beige;
	}
</style>
